<template>
  <div class="add-user">
    <div>
      <label>{{ $t("route.base") }}</label>
      <div></div>
      <button>
        <img /><label>{{ title }}</label>
      </button>
    </div>
    <div>
      <div class="div-1">
        <label class="title">{{ $t("route.Picture") }}:</label>
        <el-upload
          style="margin-left: 20px"
          accept="image/*"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
          <el-image
            class="avatar"
            :src="form.avatar ? form.avatar : require('../../assets/img/icon-11.png')"
          />
        </el-upload>
      </div>
      <div class="div-1">
        <label class="title">{{ $t("route.number") }}:</label>
        <el-input class="content" v-model="form.username" />
        <label class="title">{{ $t("route.full_name") }}:</label>
        <el-input class="content" v-model="form.nickname" />
      </div>
      <div class="div-1">
        <label class="title">{{ $t("route.cell_phone_number") }}:</label>
        <el-input class="content" v-model="form.mobile" />
        <label class="title">{{ $t("route.YEARS_OF_SERVICE") }}:</label>
        <el-date-picker
          style="margin-left: 20px; width: 250px"
          v-model="form.entry"
          type="date"
          :placeholder="$t('route.Select_date')"
        />
      </div>

      <div class="div-1">
        <label class="title">{{ $t("route.post") }}:</label>
        <el-select
          class="content"
          v-model="form.userType"
          :placeholder="$t('route.Please_select_a_job')"
        >
          <el-option
            v-for="item in userTypeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <label class="title">{{ $t("route.Card_No") }}:</label>
        <el-input class="content" v-model="form.cardNo" />
      </div>

      <div class="div-1">
        <label class="title">工厂:</label>
        <el-select
          style="margin-left: 10px"
          v-model="form.factory"
          placeholder="请选择工厂"
        >
          <el-option v-for="item in factoryList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
        <label class="title">{{ $t("route.team") }}:</label>
        <div class="content">
          <label for="">
            {{ form.workshop ? form.workshop : "" }}{{ " "
            }}{{ form.proLine ? form.proLine : "" }}
          </label>
          <el-button class="mgr-left-10" @click="click(1)">{{
            $t("route.modify")
          }}</el-button>
        </div>
      </div>

      <div class="div-1">
        <label class="title"></label>
        <el-button type="primary" @click="onClick">{{ btnText }}</el-button>
      </div>
    </div>

    <el-dialog :title="$t('route.Modify_Team')" v-model="dialogShow1" width="30%">
      <el-cascader
        size="default"
        class="width100 mgr-top-10"
        :placeholder="$t('route.Please_select_a_team')"
        :options="proLineOptions"
        @change="proLineChange"
      />
      <el-button class="width100 mgr-top-10" @click="dialogShow1 = false">{{
        $t("route.close")
      }}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from "../../js/common/constant.js";
import i18n from "../../i18n/index";
export default {
  data() {
    return {
      title: i18n.global.t("route.IP_address_cannot_be_empty"),
      isInsert: false,
      form: {
        username: null,
        nickname: null,
        mobile: null,
        entry: new Date(),
        beGoodDevice: null,
        userType: 15,
        workshop: "",
        proLine: "",
        cardNo: null,
        factory: null,
      },
      userTypeList: Constant.USER_TYPE,
      kindList: Constant.DEVICE_KIND,
      allProLineList: [],
      workshopList: [],
      proLineList: [],
      btnText: i18n.global.t("route.Add"),
      uploadUrl: api.UPLOAD_FILE + "?type=0",
      dialogShow1: false,
      proLineOptions: [],
      factoryList: [],
    };
  },
  methods: {
    click() {
      this.dialogShow1 = true;
    },
    uploadSuccess(response, file, fileList) {
      this.form.avatar = response.data;
    },
    onClick() {
      if (CommonUtils.isEmpty(this.form.username)) {
        this.$message.error(i18n.global.t("route.Number_cannot_be_empty"));
        return;
      }
      if (CommonUtils.isEmpty(this.form.nickname)) {
        this.$message.error(i18n.global.t("route.Name_cannot_be_empty"));
        return;
      }
      if (CommonUtils.isEmpty(this.form.mobile)) {
        this.$message.error(i18n.global.t("route.phone"));
        return;
      }
      if (CommonUtils.isEmpty(this.form.factory)) {
        this.$message.error("请选择工厂");
        return;
      }
      if (this.isInsert) {
        this.addUser();
      } else {
        this.updateUser();
      }
    },
    addUser() {
      http.post(
        api.ADD_USER,
        {
          adminId: this.$store.state.user.id,
          username: this.form.username,
          nickname: this.form.nickname,
          mobile: this.form.mobile,
          entry: this.form.entry.format("yyyy-MM-dd"),
          beGoodDevice: this.form.beGoodDevice,
          userType: this.form.userType,
          factory: this.form.factory,
          workshop: this.form.workshop,
          proLine: this.form.proLine,
          cardNo: this.form.cardNo,
          avatar: this.form.avatar,
        },
        (data) => {
          this.$message.success(i18n.global.t("route.Successfully_added"));
          this.$router.go(-1);
        }
      );
    },
    updateUser() {
      http.post(
        api.UPDATE_USER,
        {
          userId: this.form.id,
          username: this.form.username,
          nickname: this.form.nickname,
          mobile: this.form.mobile,
          entry: this.form.entry.format("yyyy-MM-dd"),
          beGoodDevice: this.form.beGoodDevice,
          userType: this.form.userType,
          factory: this.form.factory,
          workshop: this.form.workshop,
          proLine: this.form.proLine,
          avatar: this.form.avatar,
          cardNo: this.form.cardNo,
        },
        (data) => {
          this.$message.success(i18n.global.t("route.Modified_successfully"));
          this.$router.go(-1);
        }
      );
    },
    getAllFactory() {
      http.post(
        api.GET_ALL_FACTORY,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          for (var item of data.data) {
            this.factoryList.push(item.name);
          }
        }
      );
    },
    getPorLineRow() {
      http.post(
        api.GET_POR_LINE_ROW,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.proLineOptions = data.data;
        }
      );
    },
    proLineChange(value) {
      this.form.workshop = value[0];
      this.form.proLine = value[1];
    },
  },
  created() {
    var userStr = this.$route.params.user;
    var userType = this.$route.params.userType;
    if (userStr) {
      this.isInsert = false;
      this.form = JSON.parse(userStr);
      this.form.entry = new Date(this.form.entry);
      this.btnText = i18n.global.t("route.modify");
      this.title = i18n.global.t("route.Modify_employee");
    } else {
      this.isInsert = true;
      this.btnText = i18n.global.t("route.Add");
      this.title = i18n.global.t("route.Add_employee");
    }
    if (userType) {
      this.form.userType = 16;
    }
    this.getPorLineRow();
    this.getAllFactory();
  },
};
</script>
<style lang="scss" scoped>
.add-user {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  .avatar {
    width: 100px;
    height: 100px;
  }

  > div:nth-of-type(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }
  }

  > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    .div-1 {
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      align-items: center;

      .title {
        width: 120px;
        text-align: right;
      }

      .content {
        margin-left: 20px;
        width: 250px;
      }

      > button {
        margin-left: 20px;
        width: 250px;
      }
    }
  }
}
</style>
